<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="">
		span{
			width: 200PX;
			height: 200PX;
			background-color: blue;
			margin: 20px 20px;
		}



		/*行内元素可以设置内外编剧吗？
		内边距  上下不会生效  左右会生效 (如果设置了背景颜色 背景色会变大)*/
/*		外边距  左右生效  上下不会生效*/




		.only{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 0 5px;
			display: inline-block;
/*			将该元素变为  行内元素*/
			font-size: 16px;
		}

		.box{
/*			1.*/
			width: 840px;
			margin: 0 auto;
/*			2.*/
/*			text-align: center;*/
			font-size: 0;
		}
	/*	解决行内块元素 中间有间隙的问题
		1.第一步 给包裹行内块元素的父级设置 font-size : 0;
		2.第二步 给行内块元素本身 设置 font-size: 0 你需要的大小*/


	</style>
</head>
<body>
	<div class="box">
		<div class="only">111</div>
		<div class="only">222</div>
		<div class="only">333</div>
		<div class="only">444</div>

	</div>

	<div></div>
	<!-- display:bloke -->
	<span></span>
	<!-- dispaly:inline -->
	<img src="../1.jpg">
	<!-- display:inline-bloke -->



	<!-- <span>张无忌</span> -->
	<!-- <span>张无忌</span> -->
	<!-- 块元素
	行内元素
	行内块元素 -->




</body>
</html>